概覽

Web Vitals 是由 Google 分析大量使用者資料後，用來量化網站使用者體驗的指標，藉由測量 Web Vitals 分數讓開發者能更有方向的優化網站體驗，尤其是 Core Web Vitals。

Core Web Vitals

Core Web Vitals 是由 Google 定期選出，在三種不同面相中最具代表性的使用者體驗指標，而目前的 Core Web Vitals 分別是：

• Largest Contentful Paint (LCP) – 載入速度
• First Input Delay (FID) – 互動性
• Cumulative Layout Shift (CLS) – 穩定性

LCP

lab、field

最大內容繪製（LCP） 是「載入速度」的代表，代表頁面中最大的圖片、影片預覽圖、文字等等，由於各個元素繪製的速度不同，LCP 可能隨時間改變。

比起 load 或 DOMContentLoaded 事件，LCP 更貼近使用者感受到頁面內容已經載入完成的時間。

判斷依據

只有完全繪製在可視區域的元素才會被算入 LCP，每當頁面出現一個比當前 LCP 更大的元素就會取代為新的 LCP，直到使用者開始和網頁互動為止。

取自 https://web.dev/lcp/，綠色元素是讀取過程不斷變化的 LCP

FID

field

首次輸入延遲（FID）為「可用性」的代表，大大的影響使用者對網頁的第一印象，大家一定都有剛載入某個網頁時，按鈕或連結怎麼點都沒有反應的經驗吧？

判斷依據

使用者第一次點擊按鈕、連結或和 input、checkbox 等等元素互動時，元素反映使用者動作的延遲，具體來說是觸發輸入事件到主線程下一次空閒（也就是終於有空來執行 Event listener）的時間。

取自 https://web.dev/fid/，FCP 同樣也是影響第一印象的重要指標，另外圖中也示意了 TTI 的區間。

CLS

lab、field

累計排版位移（CLS）是「穩定性」的代表，網頁中載入過程中可能因為元素載入速度不同造成元素位移，例如圖片讀取完畢時撐開了元素上方的空間等等，最惱人的就是正準備點擊某個按鈕時因為元素位移點到了其他按鈕。

判斷依據

CLS 的計算公式為：影響範圍（impact fraction） * 移動距離（distance fraction），也就是元素位移前後位置的聯集佔螢幕空間比例乘上元素移動距離佔螢幕比例，並累加所有值。

另外在使用者互動 500 毫秒內的 CLS 不會被計入，例如點擊展開元素，因為這些 CLS 是可預期的。

取自 https://web.dev/cls/，強迫購買的概念？

Web Vitals

以下是除了 Core Web Vitals 以外的指標，前二者與 LCP 較相關，後二者則和 FID 有關，可作為優化 Core Web Vitals 的考量依據之一。

FCP

lab、field

First Contentful Paint 為網頁繪出第一個圖片、文字等內容的時間。

TTFB

lab、field

Time to First Byte 關係到網路速度、Server 處理時間，具體計算是從使用者發出 Request 到接收到第一個 Byte 的時間。

TTI

lab

Time to Interactive 代表完全可以開始和網頁互動的時刻，具體計算是從 FCP 到最後一個 Long task 結束的時間，Long task 是指主線程中執行超過 50 毫秒的 Task，最後一個 Long task 代表 5 秒內沒有其他 Long task 且當時沒有三個以上的 GET 請求。

TBT

lab

由於主線程在 TTI 之前還是有零星的空閒，Total Blocking Time 用來計算從 FCP 到 TTI 之間會使用者互動時無法立即回應的區間總和，實際計算是把所有 Long task 超過 50 毫秒部分加總。

取自 https://web.dev/tbt/，例如最左邊的 Task 執行了 250 ms，就有 200 ms 的 Blocking time。

Why 50 ms?

由於使用者和元素互動時執行 Event Listener 也需要時間（估計不超過 50 ms），且頁面的反應時間在 100 毫秒內使用者才不會有卡住的感覺，因此超過主線程上超過 50 ms 的 Task 越長越多，卡住使用者的機率越高。

指標測量方式

Web Vitals 的測量環境分為兩種，可以看到剛才提及的各個指標下方都有標註能在哪些環境測量：

• in the lab – 開發時的穩定環境來模擬頁面載入
• in the field – 真實使用者的載入和互動

In the lab

一方面是網頁正式上線前，肯定沒有使用者資料，且開發環境才能穩定的測量各個效能指標，藉由分數比較優化前後的差異，並在上線前盡可能提高分數。

In the field

由於網頁就是給使用者看的，最真實的效能資訊就是來自使用者，使用者的設備、網路都不同，甚至是收到的廣告、額外的插件也會影響等等，在開發環境難以模擬。

Score

Good、Poor 的判定方式是看 PR75 的使用者落在哪個區間，假設一個頁面中 PR75（也就是秒數較少的 75% ）的使用者 LCP 低於 2.5 秒就是 Good，若大於 4 秒就是 Poor。

測量工具

Core Web Vitals 的測量工具有很多種，分別有其適用之處，以下簡單說明各個工具的特色以及適用的環境：

Lab & Field

PageSpeed Insights

輸入網址就能測量指標，測量結果來自 Lighthouse 和 Chrome UX Report，可以同時比較 Lab 和 Field 的使用體驗報告。

Web Vitals Extension

Chrome Extension，安裝後方便及時測量指標。

Web Vitals Library

用 Web Vitals 提供的 JavaScript library 客製測量工具。

Field

Chrome UX Report

來自真實資料，可透過圖表比較不同時間的指標變化，也可用網路、設備、國家來分類。

Search Console

以頁面為單位測量指標，可以針對效能較差的頁面先做優化。

Lab

Chrome DevTools & Lighthouse

直接在開發環境測量指標，由於沒有真實使用者，以 TBT 代替 FID。
另外可以參考 Score calculator 看看 Lighthouse 是怎麼計算分數的。

WebPageTest

一樣以 TBT 代替 FID，另外會以多種環境如設備、地理位置等等來測量網站，提供非常豐富的資訊。

如何影響 SEO

網站使用體驗和一直是 SEO 計算的重點，利用 Web Vitals 量化使用者體驗後，開發者在提升使用者體驗的部分有了更明確的改進方向。

而其他影響 SEO 的重點還有行動裝置相容性、網頁安全性、HTTPS、侵入式廣告、彈窗等等。

Credits

https://web.dev/vitals/
Web Vitals Changelogs